<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/pub.css">
    <link rel="stylesheet" href="../css/details.css">
</head>

<body>
    <div class="head">
        <div class="head-top">
            <div class="welcome">爱书的朋友们，欢迎来淘书！</div>
            <ul>
                <li>
                    <a href="../index.html">首页</a>
                    <a href="login.html">我的淘书</a>
                    <a href="car.html">购物车</a>
                    <a href="">帮助中心</a>
                    <a href="">400-8888-184</a>
                </li>
            </ul>
        </div>
    </div>
    <header class="header">
        <div class="w">
            <div class="logo"><img src="../static/img/taoshu-logo.jpg" alt=""></div>
            <div class="search">
                <input type="text" placeholder="请输入关键词" id="txt1"><input type="button" value="搜索" id="sea">
            </div>
        </div>
    </header>
    <nav class="nav">
        <div class="w">
            <ol>
                <li><a href="list.html">文学</a></li>
                <li><a href="list.html">小说</a></li>
                <li><a href="list.html">传记</a></li>
                <li><a href="list.html">艺术</a></li>
                <li><a href="list.html">收藏/鉴赏</a></li>
                <li><a href="list.html">经济管理</a></li>
                <li><a href="list.html">自我实现/励志</a></li>
                <li><a href="list.html">考试</a></li>
                <li><a href="list.html">青春文学</a></li>
                <li><a href="list.html">散文随笔</a></li>
            </ol>
        </div>
    </nav>
    <article class="article">
        <div class="w">
            <div class="art-left">
                <div class="arc-top">
                    <dl>
                        <dt>同类图书热卖榜</dt>
                        <dd>
                            <a href="build.html">1.寒：韩寒2006音乐·诗文·影像</a>
                        </dd>
                        <dd>
                            <a href="build.html">2.此情不关风和月</a>
                        </dd>
                        <dd>
                            <a href="build.html">3.谁制造了韩寒？关于韩寒的对话</a>
                        </dd>
                        <dd>
                            <a href="build.html">4.牛汉散文</a>
                        </dd>
                        <dd>
                            <a href="build.html">5.现代性的追求</a>
                        </dd>
                        <dd>
                            <a href="build.html">6.图说经典·古文观止</a>
                        </dd>
                        <dd>
                            <a href="build.html">7.无所不谈</a>
                        </dd>
                        <dd>
                            <a href="build.html">8.肥妹</a>
                        </dd>
                        <dd>
                            <a href="build.html">9.心安草V</a>
                        </dd>
                        <dd>
                            <a href="build.html">10.望海楼札记</a>
                        </dd>
                    </dl>
                </div>
                <div class="nav-bottom">
                    <a href="build.html"><img src="../static/selected/1072_190.png" alt=""></a>
                    <a href="build.html"><img src="../static/selected/1124_190.jpg" alt=""></a>
                    <a href="build.html"><img src="../static/selected/1169_190.jpg" alt=""></a>
                </div>
            </div>
            <div class="art">
                <div id="cont">
                    <!-- <div class="art-middle">
                        <div class="art-pic">
                            <img src="../static/selected/1345197615.jpg" alt="">
                            <span></span>
                        </div>
                        <div class="big-box">
                            <img src="../static/selected/1345197615.jpg" alt="">
                        </div>
                    </div>
                    <div class="art-right" id="cont">
                        <p class="press">书名：武汉出版社</p>
                        <p class="price1">淘书价：￥10.50</p>
                        <p class="Price2">定&nbsp; &nbsp;价：￥32.80</p>
                        <p class="author">作&nbsp; &nbsp;者：猫语猫寻 著</p>
                        <input type="button" value="添加到购物车">
                    </div> -->
                </div>
                <div class="bottom">
                    <h4>内容简介</h4>
                    <div class="essay">
                        <h6>《我不愿让你一个人》，豆瓣红人“猫语猫寻”给予您信心与希望的人生成长之书。</h6>
                        <ul>
                            <li>著名畅销书作家、《永远热泪盈眶》作者，翩翩亲笔作序。</li>
                            <li>豆瓣红人烟波人长安、午歌、这么远那么近、小岩井诚挚推荐。</li>
                            <li>独家收录豆瓣超级热帖《不结婚的人都该去死》、《用你想要的方式把你放在心底》……</li>
                            <li>39篇佳作，超2亿次阅读，温暖无数人！</li>
                        </ul>
                        <p>猫语猫寻，豆瓣、新浪博客双料人气作家，擅长用流畅、细腻且治愈的笔调，将当下年轻人所遇到的人生、情感、成长等问题，以通俗、有趣且新奇的方式讲述出来，具有强大的抚慰、治愈效果。孤独、迷茫、困惑、彷徨、无助……这些都本该是青春应有的情绪，请你别害怕，无论你身处何地，无论你境况怎样，猫语猫寻都是你坚强的后援，都会与你一起分担你的压力。在成长的岁月里，愿这本书能陪伴你，使你达到人生的更美好状态。</p>
                        <p>这个世界匆匆忙忙，曾经重要的人变成甲乙丙丁，曾经的某某某成为陌生人，当你面对周遭日渐的冷漠麻木，希望还有这本书陪伴在你身边，帮你唤回往日的温情。愿你有良人相伴，愿你有岁月回头，愿你不再是一个人。</p>
                    </div>
                </div>
            </div>
        </div>
    </article>
    <footer class="footer">
        <div class="w">
            <div class="footer-nav">
                <dl>
                    <dt>新手入门</dt>
                    <dd><a href="">购物流程</a></dd>
                    <dd><a href="">发票制度</a></dd>
                    <dd><a href="">积分说明</a></dd>
                    <dd><a href="">我的订单</a></dd>
                    <dd><a href="">关于特价书</a></dd>
                </dl>
                <dl>
                    <dt>配送方式</dt>
                    <dd><a href="">派送时间和运费</a></dd>
                    <dd><a href="">验货与签收</a></dd>
                    <dd><a href="">订单配送查询</a></dd>

                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="">货到付款</a></dd>
                    <dd><a href="">网上支付</a></dd>
                    <dd><a href="">邮局汇款</a></dd>
                    <dd><a href="">银行转账</a></dd>
                    <dd><a href="">账户余额</a></dd>
                </dl>
                <dl>
                    <dt>售后服务</dt>
                    <dd><a href="">退换货政策</a></dd>
                    <dd><a href="">退换货流程</a></dd>
                    <dd><a href="">退换货申请</a></dd>
                    <dd><a href="">退款说明</a></dd>
                    <dd><a href="">申请余额提现</a></dd>
                </dl>
                <dl>
                    <dt>帮助信息</dt>
                    <dd><a href="">常见问题</a></dd>
                    <dd><a href="">找回密码</a></dd>
                    <dd><a href="">汇款单招领</a></dd>
                    <dd><a href="">联系客服</a></dd>
                </dl>
            </div>
            <div class="cooper">
                <span class="Company">合作单位： </span>
                <ul>
                    <li><a href="">读书网</a></li>
                    <li><a href="">中国网读书频道</a></li>
                    <li><a href="">起点中文网</a></li>
                    <li><a href="">人大经济网</a></li>
                    <li><a href="">杂志网</a></li>
                    <li><a href="">大佳网</a></li>
                    <li><a href="">中国教育网</a></li>
                    <li><a href="">出版商务周报</a></li>
                    <li><a href="">作家在线</a></li>
                    <li><a href="">凯迪社区</a></li>
                    <li><a href="">中国教育网</a></li>
                    <li><a href="">出版商务周报</a></li>
                    <li><a href="">作家在线</a></li>
                    <li><a href="">凯迪社区</a></li>
                </ul>
            </div>
            <div class="footer-copy">
                <ul>
                    <li><a href="">关于淘书</a></li>
                    <li><a href="">数目清单</a></li>
                    <li><a href="">网站联盟</a></li>
                    <li><a href="">免费条款</a></li>
                    <li><a href="">数据API</a></li>
                    <li><a href="">友情链接</a></li>
                </ul>
                <ul>
                    <li>Copyright &copy;2012-2015淘书网Taoshu.com版权所有 </li>
                    <span>|</span>
                    <li>京ICP备12020895出版物经营许可证 新出发京零字第朝110069号</li>
                </ul>
            </div>

        </div>
    </footer>
</body>
<!-- <script src="../js/Magnifier.js"></script> -->
<script src="../js/ajax-promise.js"></script>
<script>
    // console.log(location.search.slice(1).split("=")[1]);
    class Details {
        constructor() {
            this.cont = document.getElementById("cont");
            this.url = "http://localhost/project/data/goods.json";
            // console.log(this.cont);
            this.load();
            this.getId();
            this.addEvent();
        }
        getId() {
            this.id = location.search.slice(1).split("=")[1];
        }
        load() {
            ajax({
                url: this.url
            }).then((res) => {
                this.res = JSON.parse(res);
                this.display();
            })
        }
        display() {
            this.res.forEach(val => {
                if (val.goodsId === this.id) {
                    // console.log(val);
                    this.cont.innerHTML = `<div class="art-middle">
                        <div class="art-pic">
                            <img src="${val.img}" alt="">
                            <span></span>
                        </div>
                        <div class="big-box">
                            <img src="${val.img}" alt="">
                        </div>
                    </div>
                    <div class="art-right" id="cont" index="${val.goodsId}">
                        <p class="press">书名：${val.name}</p>
                        <p class="price1">淘书价：${val.taoshu}</p>
                        <p class="Price2">定&nbsp; &nbsp;价：${val.price}</p>
                        <p class="author">作&nbsp; &nbsp;者：${val.author}</p>
                        <input type="button" value="添加到购物车" class="add">
                    </div>`;
                }
            });
            new Large();
        }
        addEvent() {
            var that = this;
            this.cont.onclick = function(eve) {
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if (tar.className == "add") {
                    that.goodsId = tar.parentNode.getAttribute("index");
                    that.setData();
                    // console.log(0);
                }
            }
        }
        setData() {
            var gm = localStorage.getItem("goodsMsg");
            if (gm === null) {
                gm = [{
                    goodsId: this.goodsId,
                    num: 1,
                    msg: this.getData(this.goodsId)
                }];
            } else {
                gm = JSON.parse(gm);
                var abc = 0;
                for (var i = 0; i < gm.length; i++) {
                    if (gm[i].goodsId === this.goodsId) {
                        gm[i].num++;
                        abc = 1;
                        break;
                    }
                }
                if (abc == 0) {
                    gm.push({
                        goodsId: this.goodsId,
                        num: 1,
                        msg: this.getData(this.goodsId)
                    })
                }
            }
            localStorage.setItem("goodsMsg", JSON.stringify(gm));
        }
        getData(id) {
            for (var i = 0; i < this.res.length; i++) {
                if (this.res[i].goodsId === id) {
                    return this.res[i];
                }
            }
            return {};
        }

    }
    new Details;




    //放大镜
    class Large {
        constructor() {
            this.sBox = document.querySelector(".article .art .art-middle .art-pic");
            this.sImg = document.querySelector(".article .art .art-middle .art-pic img");
            this.sSpan = document.querySelector(".article .art .art-middle .art-pic span");
            this.bBox = document.querySelector(".article .art .art-middle .big-box");
            this.bImg = document.querySelector(".article .art .art-middle .big-box img");
            this.addEvent();
        }
        addEvent() {
            var that = this;
            this.sBox.onmouseover = function() {
                that.over();
            }
            this.sBox.onmousemove = function(eve) {
                var e = eve || window.event;
                that.move(e);
            }
            this.sBox.onmouseout = function() {
                that.out();
            }
        }
        over() {
            this.sSpan.style.display = "block";
            this.bBox.style.display = "block";
        }
        move(e) {
            var l = e.pageX - this.sBox.offsetLeft - this.sSpan.offsetWidth / 2;
            var t = e.pageY - this.sBox.offsetTop - this.sSpan.offsetHeight / 2;
            if (l < 0) l = 0;
            if (l > this.sBox.offsetWidth - this.sSpan.offsetWidth) {
                l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
            }
            if (t < 0) t = 0;
            if (t > this.sBox.offsetHeight - this.sSpan.offsetHeight) {
                t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
            }
            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";
            var x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
            var y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
            this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
            this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
        }
        out() {
            this.sSpan.style.display = "none";
            this.bBox.style.display = "none";
        }

    }
</script>

</html>